import React from 'react';
import { Slider } from 'antd';
import { useSelector } from 'react-redux';
import { RootState } from '../store';
import { useImageProcess } from '../hooks/useImageProcess';
import { RotateCcw } from 'lucide-react';

const FilterPanel: React.FC = () => {
  const { filters } = useSelector((state: RootState) => state.image);
  const { applyFilters } = useImageProcess();

  const handleFilterChange = (filterType: keyof typeof filters, value: number) => {
    applyFilters({ [filterType]: value });
  };

  const resetFilters = () => {
    applyFilters({
      brightness: 0,
      contrast: 0,
      saturation: 0,
      blur: 0,
    });
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200">
          滤镜调整
        </h3>
        <button
          onClick={resetFilters}
          className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
          title="重置滤镜"
        >
          <RotateCcw className="w-4 h-4" />
        </button>
      </div>

      <div className="space-y-4">
        {/* 亮度 */}
        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            亮度: {filters.brightness}
          </label>
          <Slider
            min={-100}
            max={100}
            value={filters.brightness}
            onChange={(value) => handleFilterChange('brightness', value)}
            tooltip={{ formatter: (value) => `${value}%` }}
          />
        </div>

        {/* 对比度 */}
        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            对比度: {filters.contrast}
          </label>
          <Slider
            min={-100}
            max={100}
            value={filters.contrast}
            onChange={(value) => handleFilterChange('contrast', value)}
            tooltip={{ formatter: (value) => `${value}%` }}
          />
        </div>

        {/* 饱和度 */}
        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            饱和度: {filters.saturation}
          </label>
          <Slider
            min={-100}
            max={100}
            value={filters.saturation}
            onChange={(value) => handleFilterChange('saturation', value)}
            tooltip={{ formatter: (value) => `${value}%` }}
          />
        </div>

        {/* 模糊 */}
        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            模糊: {filters.blur}px
          </label>
          <Slider
            min={0}
            max={20}
            value={filters.blur}
            onChange={(value) => handleFilterChange('blur', value)}
            tooltip={{ formatter: (value) => `${value}px` }}
          />
        </div>
      </div>
    </div>
  );
};

export default FilterPanel;